<template>
    <div>
        <!-- ec -->
      <el-dialog
        :title="titles[activeIndex].data"
        v-el-drag-dialog
        :visible.sync="show"
        :modal="false"
        :close-on-click-modal="false"
      >
      <div class="dialog-change">
        <button @click="activeIndex = 0":class="activeIndex == 0 ? 'select-quick-active' : ''">EC网格预报</button>
        <button @click="activeIndex = 1" :class="activeIndex == 1 ? 'select-quick-active' : ''">智能网格预报</button>
      </div>
        <el-table
          :data="datas[activeIndex].data"
          @row-click="handleRowClick"
          style="width: 100%"
          height="250"
        >
          <el-table-column
            property="name"
            label="名字"
            width="150"
          ></el-table-column>
          <el-table-column
            property="arearain"
            label="面雨量"
            width="200"
          ></el-table-column>
          <el-table-column
            property="criticalPrecipitation"
            label="阈值"
          ></el-table-column>
          <el-table-column
            property="status_difference"
            label="超阈值"
          ></el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { Vector } from "ol/layer";
  import { Vector as VectorSource } from "ol/source";
  import {createHighLayer} from '../utils'
  import elDragDialog from "@/views/surfaceRainfallForecast/compoents/el-drag-dialog";
  export default {
    props: ["titleLeft","titleRight", "dialogTableVisible", "currentDataLeft","currentDataRight"],
    name: "DialogList",
    directives: {
      elDragDialog,
    },
    data() {
      return {
        //高亮的图层
        statusDifferenceHighLayer: null,
        activeIndex:0,
        titles:[this.$props.titleLeft,this.$props.titleRight],
        datas:[{
          data:this.$props.currentDataLeft,
          cur:"left-map",
        },
        {
          data:this.$props.currentDataRight,
          cur:"right-map"
        }],
      };
    },
    computed: {
      show: {
        get() {
          return this.$props.dialogTableVisible;
        },
        set(val) {
          this.$emit("closedDiglogCompare");
        },
      },
      getTitle(){
            if(this.activeIndex == 0){
                return this.$props.titleLeft;
            }
            return this.$props.titleRight;
        },
    },
    mounted() {
      this.statusDifferenceHighLayer = new Vector({
        source: new VectorSource({}),
        name: "surface-rainfall-forecast-status-difference-highLayer",
        zIndex: 100,
      });
      this.$store.getters.Map.map.addLayer(this.statusDifferenceHighLayer);
    },
    methods: {
      handleRowClick(row) {
        const currentDataCur = this.datas[this.activeIndex].cur;

        //数据对比
        if(currentDataCur == 'left-map'){
            this.$emit("showHightLayer",row)
        }else {
        this.statusDifferenceHighLayer.getSource().clear();
        createHighLayer(this.statusDifferenceHighLayer,row);
        //跳转过去
        this.$store.getters.Map.view.animate({
          center:[parseFloat(row.longitude),parseFloat(row.latitude)],
          duration:1000,
        })
        }
       
      },
    },
    beforeDestroy() {
      this.$store.getters.Map.map.removeLayer(this.statusDifferenceHighLayer);
    },
  };
  </script>
  
  <style scoped lang="scss">
    .dialog-change {
    display: flex;
    justify-content: space-evenly;
    gap: px-to-rem(88);
    button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: px-to-rem(154);
      height: px-to-rem(34);
      background-color:gray;
      color: white;
      outline: none;
      border-radius: 2px;
      border: none;
      font-size: px-to-rem(16);
      cursor: pointer;
    }
  }
  .select-quick-active{
    background-color: #2394ff !important;
  }
</style>
  